<template>
  <view class="handle-submit-page">
    <Navbar :title="pageTitle" />

    <!-- 有退回记录时的页面内容 -->
    <view v-if="hasRejectRecords" class="reject-content">
      <!-- 信息区域 -->
      <view class="info-section-top">
        <view class="info-item">
          <text class="info-label">退回时间：</text>
          <text class="info-value">{{ latestRejectRecord?.rejectTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">退回人：</text>
          <text class="info-value"
            >{{ latestRejectRecord?.rejectPerson }}
            {{ latestRejectRecord?.rejectPhone }}</text
          >
          <image
            src="/static/img/consolePages/phone-icon.png"
            class="phone-icon"
            mode="widthFix"
            @click="makePhoneCall(latestRejectRecord?.rejectPhone)"
          ></image>
        </view>
        <view class="info-item">
          <text class="info-label">上次处理人：</text>
          <text class="info-value"
            >{{ lastHandlerInfo?.name }} {{ lastHandlerInfo?.phone }}</text
          >
          <image
            src="/static/img/consolePages/phone-icon.png"
            class="phone-icon"
            mode="widthFix"
            @click="makePhoneCall(lastHandlerInfo?.phone)"
          ></image>
        </view>
      </view>

      <!-- 退回说明和处理建议卡片 -->
      <view class="info-section">
        <view class="info-item-reject">
          <text class="info-label reject-label-1">退回说明：</text>
          <text class="info-value reject-label">{{
            latestRejectRecord?.rejectReason || rejectReason
          }}</text>
        </view>
        <view class="info-item-reject">
          <text class="info-label reject-label-1">处理建议：</text>
          <text class="info-value reject-label">{{
            latestRejectRecord?.rehandleAdvice || rehandleAdvice
          }}</text>
        </view>
        <image
          class="left-bottom"
          src="/static/img/left-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="right-bottom"
          src="/static/img/right-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="left-top"
          src="/static/img/left-top.png"
          mode="widthFix"
        ></image>
        <image
          class="right-top"
          src="/static/img/right-top.png"
          mode="widthFix"
        ></image>
      </view>

      <!-- 处理方法输入框 -->
      <view class="input-section">
        <view class="section-title">处理方法</view>
        <view class="input-container">
          <textarea
            v-model="handleMethod"
            class="input-field"
            placeholder="请输入处理方法..."
            maxlength="200"
            show-confirm-bar="false"
            auto-height
            :style="{ minHeight: '180rpx', maxHeight: '400rpx' }"
          />
          <view class="char-counter">{{ handleMethod.length }}/200</view>
        </view>
        <VoiceButton
          :currentValue="handleMethod"
          @update="handleMethodUpdate"
        />
        <image
          class="left-bottom"
          src="/static/img/left-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="right-bottom"
          src="/static/img/right-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="left-top"
          src="/static/img/left-top.png"
          mode="widthFix"
        ></image>
        <image
          class="right-top"
          src="/static/img/right-top.png"
          mode="widthFix"
        ></image>
      </view>

      <!-- 图片上传区域 -->
      <view class="image-upload-section">
        <view class="upload-title">上传图片</view>
        <view class="upload-area">
          <view
            v-for="(image, index) in uploadedImages"
            :key="index"
            class="uploaded-image-item"
          >
            <image :src="image" class="uploaded-image" mode="aspectFill" />
            <view class="delete-btn" @click="deleteImage(index)">×</view>
          </view>
          <view
            v-if="uploadedImages.length < 3"
            class="upload-btn"
            @click="showImageSelect"
          >
            <image
              src="/static/img/consolePages/upload-icon.png"
              class="upload-icon"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <image
          class="left-bottom"
          src="/static/img/left-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="right-bottom"
          src="/static/img/right-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="left-top"
          src="/static/img/left-top.png"
          mode="widthFix"
        ></image>
        <image
          class="right-top"
          src="/static/img/right-top.png"
          mode="widthFix"
        ></image>
      </view>
    </view>

    <!-- 无退回记录时的页面内容 -->
    <view v-else class="normal-content">
      <!-- 信息区域 -->
      <view class="info-section-top">
        <view class="info-item">
          <text class="info-label">告警位置：</text>
          <view class="info-value location-container">
            <text class="location-text" @longpress="showLocationModal">
              {{ currentAlarm?.location }}
            </text>
          </view>
        </view>
        <view class="info-item">
          <text class="info-label">告警时间：</text>
          <text class="info-value">{{ currentAlarm?.alertTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">处理人：</text>
          <text class="info-value"
            >{{ globalStore.userInfo?.nickname || '' }}
            {{ globalStore.userInfo?.mobile || '' }}</text
          >
        </view>
      </view>

      <!-- 问题描述输入框 -->
      <view class="input-section">
        <view class="section-title">问题描述</view>
        <view class="input-container">
          <textarea
            v-model="problemDesc"
            class="input-field"
            placeholder="请输入现场问题描述..."
            maxlength="200"
            show-confirm-bar="false"
            auto-height
            :style="{ minHeight: '180rpx', maxHeight: '400rpx' }"
          />
          <view class="char-counter">{{ problemDesc.length }}/200</view>
        </view>
        <VoiceButton
          :currentValue="problemDesc"
          @update="handleProblemDescUpdate"
        />
        <image
          class="left-bottom"
          src="/static/img/left-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="right-bottom"
          src="/static/img/right-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="left-top"
          src="/static/img/left-top.png"
          mode="widthFix"
        ></image>
        <image
          class="right-top"
          src="/static/img/right-top.png"
          mode="widthFix"
        ></image>
      </view>

      <!-- 原因分析输入框 -->
      <view class="input-section">
        <view class="section-title">原因分析</view>
        <view class="input-container">
          <textarea
            v-model="causeAnalysis"
            class="input-field"
            placeholder="请输入警告发生原因..."
            maxlength="200"
            show-confirm-bar="false"
            auto-height
            :style="{ minHeight: '180rpx', maxHeight: '400rpx' }"
          />
          <view class="char-counter">{{ causeAnalysis.length }}/200</view>
        </view>
        <VoiceButton
          :currentValue="causeAnalysis"
          @update="handleCauseAnalysisUpdate"
        />
        <image
          class="left-bottom"
          src="/static/img/left-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="right-bottom"
          src="/static/img/right-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="left-top"
          src="/static/img/left-top.png"
          mode="widthFix"
        ></image>
        <image
          class="right-top"
          src="/static/img/right-top.png"
          mode="widthFix"
        ></image>
      </view>

      <!-- 处理方法输入框 -->
      <view class="input-section">
        <view class="section-title">处理方法</view>
        <view class="input-container">
          <textarea
            v-model="handleMethod"
            class="input-field"
            placeholder="请输入现场处理方法和步骤..."
            maxlength="200"
            show-confirm-bar="false"
            auto-height
            :style="{ minHeight: '180rpx', maxHeight: '400rpx' }"
          />
          <view class="char-counter">{{ handleMethod.length }}/200</view>
        </view>
        <VoiceButton
          :currentValue="handleMethod"
          @update="handleMethodUpdate"
        />
        <image
          class="left-bottom"
          src="/static/img/left-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="right-bottom"
          src="/static/img/right-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="left-top"
          src="/static/img/left-top.png"
          mode="widthFix"
        ></image>
        <image
          class="right-top"
          src="/static/img/right-top.png"
          mode="widthFix"
        ></image>
      </view>

      <!-- 图片上传区域 -->
      <view class="image-upload-section">
        <view class="upload-title">上传图片</view>
        <view class="upload-area">
          <view
            v-for="(image, index) in uploadedImages"
            :key="index"
            class="uploaded-image-item"
          >
            <image :src="image" class="uploaded-image" mode="aspectFill" />
            <view class="delete-btn" @click="deleteImage(index)">×</view>
          </view>
          <view
            v-if="uploadedImages.length < 3"
            class="upload-btn"
            @click="showImageSelect"
          >
            <image
              src="/static/img/consolePages/upload-icon.png"
              class="upload-icon"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <image
          class="left-bottom"
          src="/static/img/left-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="right-bottom"
          src="/static/img/right-bottom.png"
          mode="widthFix"
        ></image>
        <image
          class="left-top"
          src="/static/img/left-top.png"
          mode="widthFix"
        ></image>
        <image
          class="right-top"
          src="/static/img/right-top.png"
          mode="widthFix"
        ></image>
      </view>
    </view>

    <!-- 固定在底部的按钮 -->
    <view class="submit-button-container">
      <!-- 有退回记录时只显示提交按钮 -->
      <button
        v-if="hasRejectRecords"
        class="submit-button"
        @click="handleSubmit"
      >
        提交
      </button>

      <!-- 无退回记录时显示拒绝和提交按钮 -->
      <view v-else class="action-buttons">
        <view class="action-button reject-button" @click="handleReject"
          >拒绝</view
        >
        <view class="action-button confirm-button" @click="handleSubmit"
          >提交</view
        >
      </view>
    </view>

    <!-- 图片选择弹窗 -->
    <tn-popup
      v-model="showImagePopup"
      open-direction="bottom"
      height="300rpx"
      bg-color="#172869"
      radius="30"
      overlay
      safe-area-inset-bottom
    >
      <view class="popup-option" @click="chooseFromAlbum">从相册选择</view>
      <view class="popup-divider"></view>
      <view class="popup-option" @click="takePhoto">拍照上传</view>
      <view class="popup-divider"></view>
      <view class="popup-option cancel" @click="showImagePopup = false"
        >取消</view
      >
    </tn-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import Navbar from '@/components/Navbar.vue';
import VoiceButton from '@/components/VoiceButton.vue';
import { useGlobalStore } from '@/store/app';
import { createRequest } from '@/utils/request';

const globalStore = useGlobalStore();
const currentAlarm = ref(null);
const problemDesc = ref('');
const causeAnalysis = ref('');
const handleMethod = ref('');
const rejectReason = ref('');
const rehandleAdvice = ref('');
const uploadedImages = ref([]);
const uploadedFileIds = ref([]); // 存储上传的staticFileId

// 图片上传相关状态
const showImagePopup = ref(false);
const isUploading = ref(false);

// 计算是否有退回记录
const hasRejectRecords = computed(() => {
  const hasRecords =
    currentAlarm.value?.rejectRecords &&
    currentAlarm.value.rejectRecords.length > 0;
  return hasRecords;
});

// 计算页面标题
const pageTitle = computed(() => {
  return hasRejectRecords.value ? '退回处理' : '告警处理';
});

// 获取最新的退回记录
const latestRejectRecord = computed(() => {
  if (!currentAlarm.value?.rejectRecords?.length) return null;
  const latest =
    currentAlarm.value.rejectRecords[
      currentAlarm.value.rejectRecords.length - 1
    ];
  return latest;
});

// 获取上次处理人信息
const lastHandlerInfo = computed(() => {
  if (!currentAlarm.value?.rejectRecords?.length) return null;

  // 现在只有一条退回记录，直接返回其中的处理人信息
  const rejectRecord = currentAlarm.value.rejectRecords[0];
  return {
    name: rejectRecord.rehandlePerson,
    phone: rejectRecord.rehandlePhone,
  };
});

onLoad(options => {
  const alarmId = options.id;
  // 解码URL编码的参数
  const location = options.location ? decodeURIComponent(options.location) : '';
  const alertTime = options.alertTime
    ? decodeURIComponent(options.alertTime)
    : '';

  if (alarmId) {
    // 如果有从父页面传递的基础信息，先设置这些信息
    if (location && alertTime) {
      currentAlarm.value = {
        id: alarmId,
        location: location,
        alertTime: alertTime,
      };
    }

    // 发起请求获取告警处理信息（主要是退回记录等详细信息）
    fetchAlarmProcessInfo(alarmId);

    // 发送测试请求
    testApiRequest(alarmId);
  } else {
    uni.showToast({
      title: '告警ID缺失',
      icon: 'none',
    });
  }
});

// 获取告警处理信息
const fetchAlarmProcessInfo = async alarmId => {
  try {
    const result = await createRequest(`/alert/getAlertProcessInfo/${alarmId}`);

    if (result.code === 200) {
      const processRecords = result.data || [];

      if (processRecords.length > 0) {
        // 根据returnRound获取最新的处理记录（退回记录）
        const latestRecord = processRecords.reduce((latest, current) => {
          return current.returnRound > latest.returnRound ? current : latest;
        });

        // 构建退回记录信息（只包含退回处理页面需要的数据）
        const rejectRecord = {
          id: latestRecord.id,
          rejectTime: latestRecord.reviewTime, // 退回时间
          rejectPerson: latestRecord.reviewerInfo?.realName || '', // 退回人姓名
          rejectPhone: latestRecord.reviewerInfo?.mobile || '', // 退回人电话
          rejectReason: latestRecord.returnReason || '', // 退回说明
          rehandleAdvice: latestRecord.returnSuggestion || '', // 处理建议
          rehandlePerson: latestRecord.processorInfo?.realName || '', // 上次处理人姓名
          rehandlePhone: latestRecord.processorInfo?.mobile || '', // 上次处理人电话
          returnRound: latestRecord.returnRound, // 退回轮次
        };

        // 更新currentAlarm，添加退回记录
        currentAlarm.value = {
          ...currentAlarm.value,
          rejectRecords: [rejectRecord], // 只保存最新的退回记录
        };

      } else {
        // 没有退回记录，清空退回记录数组
        currentAlarm.value = {
          ...currentAlarm.value,
          rejectRecords: [],
        };
      }
    } else {
      uni.showToast({
        title: result.msg || '获取告警处理信息失败',
        icon: 'none',
      });
    }
  } catch (error) {
    uni.showToast({
      title: '获取告警处理信息失败',
      icon: 'none',
    });
  }
};

// 接警请求
const testApiRequest = async alarmId => {
  try {
    const result = await createRequest(`/alert/confirmAlert/${alarmId}`, {
      method: 'get',
    });
  } catch (error) {
    // 静默处理错误
  }
};

// 拒绝处理
const handleReject = async () => {
  try {
    const result = await createRequest(
      `/alert/cancelAlert/${currentAlarm.value?.id}`,
      {
        method: 'get',
      }
    );
    if (result.code === 200) {
      uni.navigateBack();
    }
  } catch (error) {
    uni.showToast({
      title: '拒绝失败，请重试',
      icon: 'none',
    });
  }
};

// 拨打电话
const makePhoneCall = (phoneNumber) => {
  if (phoneNumber) {
    uni.makePhoneCall({
      phoneNumber: phoneNumber,
    });
  } else {
    uni.showToast({
      title: '电话号码不存在',
      icon: 'none',
    });
  }
};

// 显示位置弹窗
const showLocationModal = () => {
  if (currentAlarm.value?.location) {
    uni.showToast({
      title: currentAlarm.value.location,
      icon: 'none',
      duration: 4000,
    });
  }
};

// 显示图片选择弹窗
const showImageSelect = () => {
  showImagePopup.value = true;
};

// 检查图片大小
const checkImageSize = filePath => {
  return new Promise((resolve, reject) => {
    // 首先验证文件路径是否存在
    if (!filePath) {
      reject(new Error('文件路径为空'));
      return;
    }

    // 检查当前平台
    const platform = uni.getSystemInfoSync().platform;

    // 如果是App平台（Android/iOS），使用文件系统管理器
    if (platform === 'android' || platform === 'ios') {
      checkImageSizeFallback(filePath)
        .then(resolve)
        .catch(reject);
      return;
    }

    // 小程序平台使用uni.getFileInfo
    uni.getFileInfo({
      filePath: filePath,
      success: res => {
        const fileSizeInMB = res.size / (1024 * 1024); // 转换为MB
        
        if (fileSizeInMB > 2) {
          reject(new Error(`图片大小限制`));
        } else {
          resolve();
        }
      },
      fail: error => {
        // 如果获取文件信息失败，尝试备用方案
        checkImageSizeFallback(filePath)
          .then(resolve)
          .catch(reject);
      },
    });
  });
};

// 备用检查方案：通过文件系统管理器获取准确文件大小
const checkImageSizeFallback = filePath => {
  return new Promise((resolve, reject) => {
    try {
      // 使用文件系统管理器获取文件信息
      const fs = uni.getFileSystemManager();
      const fileInfo = fs.statSync(filePath);
      const fileSizeInMB = fileInfo.size / (1024 * 1024);
      
      if (fileSizeInMB > 2) {
        reject(new Error(`图片大小限制`));
      } else {
        resolve();
      }
    } catch (error) {
      // 如果文件系统方法失败，跳过大小验证
      resolve();
    }
  });
};

// 从相册选择图片
const chooseFromAlbum = async () => {
  showImagePopup.value = false;

  if (isUploading.value) {
    return;
  }

  try {
    // 选择图片
    const res = await uni.chooseImage({
      count: 3 - uploadedImages.value.length,
      sizeType: ['compressed'],
      sourceType: ['album'],
    });
    
    if (!res.tempFilePaths || res.tempFilePaths.length === 0) {
      throw new Error('未选择到图片');
    }

    const tempFilePath = res.tempFilePaths[0];

    // 检查图片大小
    await checkImageSize(tempFilePath);

    // 上传图片
    await uploadImage(tempFilePath);
  } catch (error) {
    uni.showToast({
      title: error.message || '选择图片失败',
      icon: 'none',
    });
  }
};

// 拍照上传
const takePhoto = async () => {
  showImagePopup.value = false;

  if (isUploading.value) {
    return;
  }

  try {
    // 拍照
    const res = await uni.chooseImage({
      count: 3 - uploadedImages.value.length,
      sizeType: ['compressed'],
      sourceType: ['camera'],
    });
    
    if (!res.tempFilePaths || res.tempFilePaths.length === 0) {
      throw new Error('拍照失败，未获取到图片');
    }

    const tempFilePath = res.tempFilePaths[0];

    // 检查图片大小
    await checkImageSize(tempFilePath);

    // 上传图片
    await uploadImage(tempFilePath);
  } catch (error) {
    uni.showToast({
      title: error.message || '拍照失败',
      icon: 'none',
    });
  }
};

// 上传图片
const uploadImage = async filePath => {
  isUploading.value = true;

  try {
    uni.showLoading({ title: '上传中...', mask: true });

    // 上传文件到服务器
    const uploadRes = await uni.uploadFile({
      url: 'http://192.168.1.19:8089/api/staticFile/upload',
      filePath: filePath,
      name: 'file',
      header: {
        Authorization: globalStore.userInfo?.token || '',
      },
      formData: {
        type: '1',
      },
    });

    const uploadResult = JSON.parse(uploadRes.data);
    if (uploadResult.code !== 200) {
      throw new Error(uploadResult.msg);
    }

    // 将上传成功的图片URL和staticFileId添加到本地数组
    uploadedImages.value.push(uploadResult.data.fileUrl);
    uploadedFileIds.value.push(uploadResult.data.staticFileId);

    // 图片上传成功
  } catch (error) {
    uni.showToast({
      title: error.message || '图片上传失败',
      icon: 'none',
    });
  } finally {
    isUploading.value = false;
    uni.hideLoading();
  }
};

// 删除图片
const deleteImage = index => {
  uploadedImages.value.splice(index, 1);
  uploadedFileIds.value.splice(index, 1);
};

// 处理语音识别结果更新
const handleProblemDescUpdate = newValue => {
  problemDesc.value = newValue;
};

const handleCauseAnalysisUpdate = newValue => {
  causeAnalysis.value = newValue;
};

const handleMethodUpdate = newValue => {
  handleMethod.value = newValue;
};

// 提交处理
const handleSubmit = async () => {
  if (hasRejectRecords.value) {
    // 有退回记录时的验证（退回说明和处理建议是只读的，不需要验证）
    if (!handleMethod.value.trim()) {
      uni.showToast({
        title: '请输入处理方法',
        icon: 'none',
      });
      return;
    }
  } else {
    // 无退回记录时的验证
    if (!problemDesc.value.trim()) {
      uni.showToast({
        title: '请输入问题描述',
        icon: 'none',
      });
      return;
    }

    if (!causeAnalysis.value.trim()) {
      uni.showToast({
        title: '请输入原因分析',
        icon: 'none',
      });
      return;
    }

    if (!handleMethod.value.trim()) {
      uni.showToast({
        title: '请输入处理方法',
        icon: 'none',
      });
      return;
    }
  }

  try {
    // 显示加载状态
    uni.showLoading({ title: '提交中...', mask: true });

    // 构建提交数据
    const submitData = {
      alertId: currentAlarm.value.id,
      problemDescription: problemDesc.value,
      causeAnalysis: causeAnalysis.value,
      solutionMethod: handleMethod.value,
      images: uploadedFileIds.value.map(fileId => ({
        staticFileId: fileId,
      })),
    };
    // 调用真实接口
    const response = await createRequest('/alert/submit', {
      data: submitData,
    });

    if (response.code === 200) {
      uni.navigateBack();
    }
  } catch (error) {
    uni.showToast({
      title: error.message || '提交失败，请重试',
      icon: 'none',
    });
  } finally {
    uni.hideLoading();
  }
};
</script>

<style scoped lang="scss">
.handle-submit-page {
  @include page-with-header;
  background: #172869;
  min-height: 100vh;
  padding-bottom: 120rpx; // 为固定按钮留出空间
}

.reject-content,
.normal-content {
  padding: 24rpx;
}

.info-section-top {
  padding: 30rpx;
  box-sizing: border-box;
  position: relative;
  background-image: url('/static/img/consolePages/info-section-top.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 24rpx;
}

.info-section {
  padding: 32rpx;
  margin-top: 24rpx;
  border: 1rpx solid #50daff;
  background-color: #051749;
  position: relative;
  margin-bottom: 40rpx;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }
}
.info-item-reject {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 20rpx;
}
.info-label {
  font-size: 28rpx;
  color: #ccc;
  min-width: 160rpx;
}

.info-value {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  text-align: right;
}

.location-container {
  max-width: 280rpx;
  overflow: hidden;
}

.location-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 28rpx;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.reject-label {
  color: #cecece;
  font-size: 24rpx;
}
.reject-label-1 {
  margin-bottom: 10rpx;
}

.phone-icon {
  width: 28rpx;
  margin-left: 20rpx;
}

.input-section {
  margin-bottom: 40rpx;
  border: 1rpx solid #50daff;
  position: relative;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #051749;
}

.section-title {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.input-container {
  position: relative;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.input-field {
  width: 100%;
  background: transparent;
  color: #fff;
  font-size: 28rpx;
  line-height: 1.6;
  border: none;
  outline: none;
  resize: none;
  overflow-y: auto;

  &::placeholder {
    color: #7ecbff;
  }
}

.left-bottom {
  position: absolute;
  left: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-bottom {
  position: absolute;
  right: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.left-top {
  position: absolute;
  left: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-top {
  position: absolute;
  right: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}

.char-counter {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
  font-size: 24rpx;
  color: #8b8b8b;
}

.image-upload-section {
  padding: 32rpx;
  margin-top: 24rpx;
  border: 1rpx solid #50daff;
  background-color: #051749;
  position: relative;
}

.upload-title {
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
  margin-bottom: 8rpx;
}

.upload-subtitle {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24rpx;
}

.upload-area {
  display: flex;
  gap: 20rpx;
}

.uploaded-image-item {
  position: relative;
  width: 180rpx;
  height: 180rpx;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  border: 1rpx solid #50daff;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background: #ff4757;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
}

.upload-btn {
  border-radius: 8rpx;
  width: 180rpx;
  height: 180rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  width: 180rpx;
}

.upload-text {
  font-size: 28rpx;
}

.submit-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #071e51;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-button {
  width: 686rpx;
  height: 80rpx;
  background: linear-gradient(90deg, #3a8dde 0%, #256bda 100%);
  color: #fff;
  font-size: 32rpx;
  border: none;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(58, 108, 255, 0.12);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  &:active {
    transform: scale(0.98);
  }
}

.action-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24rpx;
}

.action-button {
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  transition: all 0.3s ease;
  height: 80rpx;
  border: none;
  color: #fff;

  &:active {
    transform: scale(0.98);
  }
}

.reject-button {
  flex: 1;
  background: linear-gradient(135deg, #ff4757, #ff3838);
  box-shadow: 0 8rpx 24rpx rgba(255, 71, 87, 0.3);

  &:active {
    box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);
  }
}

.confirm-button {
  flex: 1.2;
  background: linear-gradient(135deg, #279bd5, #2264eb);
  box-shadow: 0 8rpx 24rpx rgba(30, 200, 225, 0.3);

  &:active {
    box-shadow: 0 4rpx 12rpx rgba(30, 200, 225, 0.3);
  }
}

/* 图片选择弹窗样式 */
.popup-option {
  color: #fff;
  text-align: center;
  font-size: 32rpx;
  height: 96rpx;
  line-height: 96rpx;
}

.popup-option.cancel {
  color: rgba(255, 255, 255, 0.6);
}

.popup-divider {
  height: 1rpx;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
}
</style>
